<template>
  <div class="status">
    <a-card class="card"
            size="small"
            style="width: 100%">
      <a-form  layout="inline" :model="formState" v-bind="formItemLayout">
        <a-form-item style="margin-bottom: 10px" label="本人">
          <a-switch :un-checked-value="0" :checked-value="1" v-model:checked="formState.myOwn" />
        </a-form-item>
        <a-form-item style="margin-bottom: 10px" label="语言">
          <a-select
              ref="select"
              placeholder="选择语言"
              v-model:value="formState.language"
              style="width: 200px"
              :options="LanguageList"
              :field-names="{ label: 'name', value: 'name' }"
              @change="handleChange"
          />
        </a-form-item>
        <a-form-item style="margin-bottom: 10px" label="状态">
          <a-select
              placeholder="选择状态"
              ref="select"
              v-model:value="formState.status"
              style="width: 200px"
              :field-names="{ label: 'name', value: 'status' }"
              :options="judgeStatusList"
              @change="handleChange"
          />

        </a-form-item>
        <a-form-item style="margin-bottom: 10px" label="题目编号">
          <a-input v-model:value="formState.problemCode" placeholder="输入题目编号" />
        </a-form-item>
        <a-form-item style="margin-bottom: 10px" label="用户">
          <a-row  :gutter="16">
            <a-col>
              <a-input v-model:value="formState.nickName" placeholder="输入用户昵称" />
            </a-col>
            <a-col>
              <a-button @click="queryProblemList" type="primary">查询</a-button>
            </a-col>
<!--            <a-col>-->
<!--              <a-button @click="queryProblemList" type="primary">重置</a-button>-->
<!--            </a-col>-->
          </a-row>
        </a-form-item>

      </a-form>
      <a-table
          :loading="loading"
          :scroll="{ x: 800 }"
          style="margin-top: 10px"
          :pagination="pagination"
          @change="handleTableChange"
          :columns="columns"
          :data-source="judgeList">
        <template #bodyCell="{ column, text ,record}">
          <template v-if="column.dataIndex === 'status'">
            <a-tag :color="getTypeByStatus(text).rgb">{{getTypeByStatus(text).name}}</a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'submitTime'">
            {{parseTime(text)}}
          </template>
          <template v-else-if="column.dataIndex === 'userVO'">
            <a style="cursor: pointer" @click="() => router.push(`/user/${record.userId}`)"  >{{text?.nickName}}</a>
          </template>
          <template v-else-if="column.dataIndex === 'detail'">
            <span @click="goToJudgeDetails(record)">
              <a>查看</a>
            </span>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>

import {computed, onMounted, reactive, ref} from 'vue';
import type { UnwrapRef } from 'vue';
import {getJudgeList, JudgeReqDTO} from "@/api/judge";
import {Judge} from  "@/common/enum"
import {getLanguageList} from "@/api/language";
import {parseTime} from "@/utils/date"
import {getTypeByStatus,judgeStatusList} from "@/common/enum";
import router from "@/router";
import {useRoute} from "vue-router";
const loading = ref(false)
const contestId = ref();
onMounted( () => {
  getLanguageList().then(res => {
    LanguageList.value = res.data
  })
  formState.cid = useRoute().params.contestId as string || '0';
  init();
})
const init = async () => {

  loading.value = true;
  const params = {
    pageNum:pagination.current,
    pageSize:pagination.pageSize
  }
  const res = await getJudgeList(formState,params);
  console.log(res.data)
  judgeList.value = res.data.rows
  pagination.total = res.data.total
  loading.value = false;
}

//筛选表单
const formState: UnwrapRef<JudgeReqDTO> = reactive({
  myOwn:0,
  cid:'0'
});
const queryProblemList = () => {
  pagination.current = 1;
  init();
}
const LanguageList = ref()
const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};
const formItemLayout = computed(() => {
  const { layout } = formState;
  return layout === 'horizontal'
      ? {
        wrapperCol: { span: 22 },
      }
      : {};
});

//表结构
const columns = [
  {
    title: '题目编号',
    dataIndex: 'pcode',
    key: 'pcode',
  },
  {
    title: '用户',
    dataIndex: 'userVO',
    key: 'userVO',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '内存/KB',
    dataIndex: 'memory',
    key: 'memory 2',
  },
  {
    title: '时间/MS',
    dataIndex: 'time',
    key: 'time',
  },
  {
    title: '语言',
    dataIndex: 'language',
    key: 'language',
  },
  {
    title: '代码长度',
    dataIndex: 'length',
    key: 'length',
  },
  {
    title: '提交时间',
    dataIndex: 'submitTime',
    key: 'submitTime',
  },
  {
    title: '操作',
    dataIndex: 'detail',
    key: 'detail',
  },
];
let judgeList = ref()
const pagination = reactive({
  total: 200,
  current: 1,
  pageSize: 10,
  pageSizeOptions:['5', '10', '15', '20']

});
const handleTableChange = (p, filters, sorter) => {
  pagination.current = p.current
  pagination.pageSize= p.pageSize
  init()
}
const goToJudgeDetails = (e) => {
  const c = router.resolve({
    path: `/judge/${e.id}`,
  });
  window.open(c.href, "_blank");
}


</script>
<style scoped>

</style>
